<template>
  <view class="content">
    <view class="body" v-if="lastPosInfo.length != 0">
      <view class="map">
        <!-- <show-pos :posInfo="posInfo"></show-pos> -->
        <map
          :show-compass="true"
          :enable-building="true"
          :latitude="lastPosInfo.end_latitude"
          :longitude="lastPosInfo.end_longitude"
          :markers="markers"
        >
        </map>
      </view>
      <view class="cont">
        <view class="lastTime">
          <label>上次骑行时间: </label>
          <text>{{ lastPosInfo.end_time }}</text>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="pos_none">
        <text>暂无位置信息</text>
      </view>
    </view>
  </view>
</template>

<script>
import showPos from "../../components/position/showPos.vue";
// 引入请求模块
import { getRequest } from "@/api/api.js";
// 引入url
import { getPos } from "@/api/request.js";

export default {
  name: "position",
  components: {
    showPos,
  },
  created() {
    this.getPosInfo();
  },
  data() {
    return {
      // 位置信息
      lastPosInfo: [],
      nowPosInfo: {},
      is_post: false,
      markers: [
        {
          id: 0,
          latitude: 24.10014,
          longitude: 115.25984,
          iconPath: "/static/icon/destination.png",
          width: 30,
          height: 30,
        },
        {
          id: 1,
          latitude: 24.10014,
          longitude: 115.25984,
          iconPath: "/static/icon/pos.png",
          width: 30,
          height: 30,
        },
      ],
    };
  },
  methods: {
    // 获取地图信息
    async getPos() {
      const that = this;
      wx.getSystemInfo({
        success: async (res) => {
          if (res.locationEnabled) {
            await uni.getLocation({
              type: "wgs84",
              geocode: true,
              success: function (res) {
                that.nowPosInfo = res;
                that.markers[1].longitude = res.longitude;
                that.markers[1].latitude = res.latitude;
                console.log("当前位置的经度：" + res.longitude);
                console.log("当前位置的纬度：" + res.latitude);
              },
              fail: (err) => {
                console.log(err);
              },
            });
          } else {
            that.markers[1].longitude = that.lastPosInfo.end_longitude;
            that.markers[1].latitude = that.lastPosInfo.end_latitude;
            uni.showToast({
              icon: "none",
              title: "检测到当前未开启定位，请开启定位",
              duration: 2500,
            });
          }
        },
      });
    },
    // 获取最后一次骑行信息
    async getPosInfo() {
      const result = await getRequest(getPos);
      console.log(result);
      if (result[1].data.status === 0) {
        if (result[1].data.data) {
          this.lastPosInfo = result[1].data.data[0];
          console.log(this.lastPosInfo);
          this.markers[0].longitude = this.lastPosInfo.end_longitude;
          this.markers[0].latitude = this.lastPosInfo.end_latitude;
          await this.getPos();
        }
      } else {
        uni.showToast({
          icon: "none",
          title: "服务器连接失败，请稍后重试！",
          duration: 2500,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .body {
    .map {
      map {
        width: 100%;
        height: 80vh;
      }
    }
    .cont {
      height: 20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      .lastTime {
        width: 80%;
        display: flex;
        justify-content: space-around;
      }
    }
  }
  .pos_none {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    text-align: center;
    text {
      color: rgb(206, 204, 204);
      font-size: 50rpx;
    }
  }
}
</style>